<template>
  <ContentWrap>
    <div class="px-20px mb-30px">
      <el-tabs v-model="queryParams.type" @tab-click="handleTabClick">
        <el-tab-pane label="普通用户" name="0" />
        <el-tab-pane label="会员" name="1" />
        <el-tab-pane label="招商人员" name="2" />
      </el-tabs>
      <el-table :data="levelTable.data" size="large" v-loading="levelTable.loading">
        <template #empty>
          <span>{{ !levelTable.loading ? '还未设置分佣等级' : '' }}</span>
        </template>
        <el-table-column prop="name" label="名称" align="center" width="120" />
        <el-table-column prop="weight" label="权重" align="center" width="60" />
        <el-table-column label="介绍" align="left" min-width="220" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.introduction || '无' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="80">
          <template #default="{ row }">
            <el-button type="primary" link @click="openEditForm(row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <LevelEditForm ref="editLevelDialog" @complete="loadLevelList" />
    </div>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { getList } from '@/api/brokerage/level'
import LevelEditForm from './LevelEditForm.vue'
import { TabsPaneContext } from 'element-plus'

defineOptions({ name: 'BrokerageLevel' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const tabType = ref('basic')

const queryParams = ref<any>({
  type: '0'
})

/** 切换 Tab */
const handleTabClick = (tab: TabsPaneContext) => {
  queryParams.value.type = tab.paneName ? tab.paneName : ''
  loadLevelList()
}

const editLevelDialog: Record<string, any> | null = ref(null)
const openEditForm = (id: number | string) => {
  editLevelDialog.value.showDialog = true
  editLevelDialog.value.setFormData(id)
}

const levelTable = reactive({
  loading: true,
  data: []
})
const loadLevelList = async () => {
  levelTable.loading = true
  try {
    const res = await getList({ type: queryParams.value.type })
    levelTable.data = res
  } catch (error) {
    console.log(error)
  }
  levelTable.loading = false
}

onMounted(async () => {
  await loadLevelList()
})
</script>
